<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
	<title>Font Weight Test 000</title>
	<style type="text/css"> 
	  .normal  { font-weight: normal; }
	  .bold	   { font-weight: bold; }
	  .bolder  { font-weight: bolder; }
	  .lighter { font-weight: lighter; }
	  .fw100	   { font-weight: 100; }
	  .fw200	   { font-weight: 200; }
	  .fw300	   { font-weight: 300; }
	  .fw400	   { font-weight: 400; }
	  .fw500	   { font-weight: 500; }
	  .fw600	   { font-weight: 600; }
	  .fw700	   { font-weight: 700; }
	  .fw800	   { font-weight: 800; }
	  .fw900	   { font-weight: 900; }
	</style>
  </head>
  <body>
	<h1>Font Weight Test 000</h1>
	<p>Section 15.3.2 says font-weights 100-900 <i>form an ordered sequence,
		where each number indicates a weight that is at
		least as dark as its predecessor.</i>
	  Also, normal = 400, bold = 700, bolder is a step darker from normal,
	  and lighter is a step lighter from normal.
	</p>
		
	<div class='normal'>font-weight: normal : same as 400</div>
	<div class='bold'>font-weight: bold : same as 700</div>
	<div class='bolder'>font-weight: bolder : usually same as 500</div>
	<div class='lighter'>font-weight: lighter : usually same as 300</div>
	<div class='fw100'>font-weight: 100</div>
	<div class='fw200'>font-weight: 200</div>
	<div class='fw300'>font-weight: 300</div>
	<div class='fw400'>font-weight: 400</div>
	<div class='fw500'>font-weight: 500</div>
	<div class='fw600'>font-weight: 600</div>
	<div class='fw700'>font-weight: 700</div>
	<div class='fw800'>font-weight: 800</div>
	<div class='fw900'>font-weight: 900</div>
  </body>
</html>
